<template>
  <div class="prefix-input-wrapper">
    <el-input
      :model-value="fullValue"
      :placeholder="placeholder"
      :disabled="disabled || readonly"
      @input="handleInput"
      class="prefix-input"
    >
      <template #prepend v-if="prefix">
        <span class="prefix-text">{{ prefix }}</span>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  prefix: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'change'])

// 完整值 = 前缀 + 用户输入值
const fullValue = computed(() => {
  if (!props.prefix) {
    return props.modelValue
  }

  // 如果modelValue已经包含前缀，直接返回
  if (props.modelValue && props.modelValue.startsWith(props.prefix)) {
    return props.modelValue
  }

  // 否则拼接前缀
  return props.prefix + (props.modelValue || '')
})

// 处理输入
function handleInput(value) {
  if (!props.prefix) {
    emit('update:modelValue', value)
    emit('change', value)
    return
  }

  // 确保前缀不被删除
  if (!value.startsWith(props.prefix)) {
    // 如果用户尝试删除前缀，恢复前缀
    emit('update:modelValue', props.prefix)
    emit('change', props.prefix)
    return
  }

  // 提取用户输入的部分（去除前缀）
  const userInput = value.substring(props.prefix.length)
  const newValue = props.prefix + userInput

  emit('update:modelValue', newValue)
  emit('change', newValue)
}

// 监听前缀变化，自动更新值
watch(() => props.prefix, (newPrefix, oldPrefix) => {
  if (newPrefix !== oldPrefix && props.modelValue) {
    // 如果前缀改变，更新modelValue
    let userPart = props.modelValue

    // 移除旧前缀
    if (oldPrefix && props.modelValue.startsWith(oldPrefix)) {
      userPart = props.modelValue.substring(oldPrefix.length)
    }

    // 添加新前缀
    const newValue = newPrefix + userPart
    emit('update:modelValue', newValue)
    emit('change', newValue)
  }
})
</script>

<style scoped lang="scss">
.prefix-input-wrapper {
  width: 100%;

  .prefix-input {
    width: 100%;

    :deep(.el-input-group__prepend) {
      background-color: #f5f7fa;
      color: #606266;
      border-right: 0;
      padding: 0 12px;

      .prefix-text {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
        font-size: 13px;
        color: #409eff;
        font-weight: 500;
      }
    }

    :deep(.el-input__inner) {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
      font-size: 13px;
    }
  }
}
</style>
